<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="boxtop">
				<view class="flex-col section_1">
					<view class="justify-center group_1">
						<view class="w-f-s">家装顾问(工长) </view>
					</view>
				</view>
				<!-- 渐变背景 -->
				<view class="image_007"></view>
				<image :src="$IMG_URL+'index/swiperGZ.png'" class="image_6" />

				<view class="justify-between group_4">
					<text class="" @click="tablist(0)" v-bind:class="[isActive ? activeClass : errorClass]">订单列表</text>
					<text class="" @click="tablist(1)"
						v-bind:class="[isActive2 ? activeClass2 : errorClass]">施工问题</text>
				</view>
				<view v-if="tabState == 0">
					<image :src="$IMG_URL+'index/tabicon.png'" class="image_7" />
				</view>
				<view class="" v-else>
					<image :src="$IMG_URL+'index/tabicon.png'" class="image_71" />
				</view>
			</view>
			<view v-if="tabState == 0" style="margin-top: 632rpx;">
				
				<!-- 订单 -->
				<scroll-view class="scroll" :upper-threshold="0" :style="{height:scrollHeight+'px'}" scroll-y="true" @scrolltolower="seemore" @scrolltoupper="onRefresh" >
					<!-- 搜索框 -->
					<view class="flex-row items-center group_5 view">
						<view class="flex-col items-start search ">
							<view class="uni-form-item uni-column u-m-l-20">
								<input class="uni-input" confirm-type="search" placeholder="请搜索业主备注名称"
									placeholder-style="font-size: 28rpx;" v-model="serchval" />
							</view>
						</view>
						<image :src="$IMG_URL+'16557862348718513986.png'" class="image_8" @click="serchlist" />
					</view>
					<view class="flex-col group_5 group_6" v-if="orderLilst.length>0">
						<view class="flex-col list-item" :key="i" v-for="(item, i) in orderLilst" @click="goexplan(i)">
							<view class="justify-between group_7">
								<text class="text_4">订单编号：{{item.ordersNumber}}</text>
								<text class="text_6" v-if="item.ordersStatus == 1">待付款</text>
								<text class="text_6" v-else-if="item.ordersStatus == 2">待完善 </text>
								<text class="text_6" v-else-if="item.ordersStatus == 3">进行中 </text>
								<text class="text_6" v-else-if="item.ordersStatus == 4">待评价 </text>
								<text class="text_6" v-else-if="item.ordersStatus == 5">已完成 </text>
								<text class="text_6" v-else>已取消</text>
							</view>
							<view class="divider">
							</view>
							<view class="flex-row group_8">
								<image :src="item.address" class="image_9" />
								<view class="flex-row text_88">
									<text class="text_8 ">{{item.consumerName}}</text>
									<text class="text_8"
										v-if="item.consumerRemark != null">({{item.consumerRemark}})</text>
								</view>

							</view>
							<text class="text_10">巡检服务订单</text>
							<text
								class="text_12">{{item.detailedName}}({{item.conductNum}}/{{item.inspectionNums}})</text>
							<view class="group_9">
								<text class="text_14">{{item.provinceName}}{{item.cityName}}{{item.districtName}}</text>
								<text class="text_16">I</text>
								<text class="text_18">{{item.roomArea}}m²</text>
								<text class="text_20">I</text>
								<text class="text_22">{{item.roomTypeName}}</text>
							</view>
							<view class="divider_1">
							</view>
							<view class="justify-between group_10">
								<view class="flex-col items-center text-wrapper" @click.stop="SGpro(item)"><text
										class="text_24">
										施工问题
									</text></view>
								<view class="flex-row group_11">
									<view class="flex-col items-center text-wrapper_1"
										@click.stop="callPhone(item.phone)"><text class="text_26">联系业主</text>
									</view>
									<view class="flex-col items-center text-wrapper_1"><text class="text_28">
											项目详情
										</text></view>
								</view>

							</view>
						</view>
					</view>
					<view v-else>
						<u-empty style="height: 40vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
				</scroll-view>
			</view>
			<view style="margin-top: 604rpx;" v-else>
				<view class="flex-row buildProtab">
					<view class="flex-col items-center tabtext-wrapper" :class="[istab == 0?'active':'']"
						@click="allScreen"><text>全部</text></view>
					<view class="flex-col items-center tabtext-wrapper" :class="[istab == 1?'active':'']"
						@click="solveScreen"><text>待解决</text></view>
					<view class="flex-col items-center tabtext-wrapper" :class="[istab == 2?'active':'']"
						@click="waitScreen"><text>待确认</text></view>
					<view class="flex-col items-center tabtext-wrapper" :class="[istab == 3?'active':'']"
						@click="sureScreen"><text>已解决</text></view>
				</view>
				<scroll-view class="scroll" :upper-threshold="0" :style="{height:scrollHeight+'px'}" scroll-y="true" @scrolltoupper="onRefresh"  @scrolltolower="seemoreSG"  >
					<view class="flex-col buildProlist" v-if="SGProlist.length>0" >
						<view class="flex-col buildProlistli" :key="i" v-for="(item, i) in SGProlist"
							@click="gotoEX(i)">

							<view class="flex-row items-center"
								style="justify-content: space-between;border-bottom: 1px solid #eeeeee;padding-bottom: 20rpx;">
								<view class="flex-row">
									<!-- 头像 -->
									<view class="buildIcon">
										<image :src="item.address" mode="">
									</view>
									<!-- 标题 巡检次数 -->
									<view class="flex-col buildName">
										<text class="buildNameTop" style="">{{item.userName}}({{item.position}})</text>
										<text class="buildNamebot" style="">第{{item.conductNum}}次巡检</text>
									</view>
								</view>
								<!-- 详情 -->
								<view class="flex-row center1 ">
									<text class="text-font">详情</text>
									<!-- <text class="text-font1"> -->
									<image class="listright" style="margin-top: 5rpx;"
										:src="$IMG_URL+'index/goright.png'" mode="" />
									<!-- </text> -->
								</view>
							</view>
							<view class="listcontent">
								<view class="listContitle flex-row">
									<text class="text_01">问题类型：{{item.issueTypeName}}</text>
									<text style="color: #FF371D;" v-if="item.rectificationStatus == 2">待确认</text>
									<text style="color: #1D6AFF;" v-else-if="item.rectificationStatus ==3">已整改</text>
									<text style="color: #FF371D;" v-else-if="item.rectificationStatus == 1">待整改</text>
								</view>
								<view class="listConpic">
									<view
										v-if="String(item.issueMedias)!='null'||item.issueMedias!=''||item.issueMedias!=item.issueMedias"
										class="imagegrid">
										<template v-for="(tempItem,i) in item.issueMedias">
											<image  :key="i" :src="tempItem" v-if="checkFile(tempItem,'image')"
												class="flex-row " @click.stop="prviewImage(item.issueMedias,i)">
											</image>
										
											<view  v-else class="videoview media" @click="goVideo(tempItem)">
												  <image class="equal-division-item" :src="tempItem+'?x-oss-process=video/snapshot,t_1000,m_fast'" ></image>
											<image
												  :src="$IMG_URL+'16557867901398396466.png'"
												  class="play"
												/>
												</view>
										</template>
										
									</view>
									<view v-else style="color: #999;font-size: 24rpx;">暂无图片</view>
								</view>
								<view class="listCont">
									{{item.issueContent}}
								</view>
								<view class="listContime">
									{{item.insertTime}}
								</view>
								<view class="JJbtn" v-if="item.rectificationStatus == 1"
									@click.stop="toPatroService(i)">
									<text class="text-center">解决</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<u-empty style="height: 70vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
				</scroll-view>
			</view>
			<view v-else-if="this.SGProlist==''">
				<u-empty style="height: 70vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
		<u-overlay :show="uploadloading" @click="uploadloading = false" class="u-flex u-row-center u-col-center">
			<view>
				<u-loading-icon size="50" :textSize="18" text="请求中" textColor="white" :vertical="true" color="white">
				</u-loading-icon>
			</view>
		</u-overlay>
	</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				errorClass: 'text_2',
				activeClass: 'text_1',
				errorClass2: 'text_2',
				activeClass2: 'text_1',
				isActive: false,
				isActive2: false,
                scrollHeight:0,
				orderLilst: [],
				// 施工问题tab list
				SGProlist: [],
				tabState: 0,
				istab: 0,
				focus: false,
				inputValue: '',
				changeValue: '',
				serchval: '',
				infodata: '',
				// 加载更多
				listQuery: {
					page: 1,
					limit: 10
				},
				total: 1,
				pageNum: 1,
				contentText: {
					contentdown: '点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				status: 'more',
				contentTextSG: {
					contentdown: '点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				statusSG: 'more',
				pageNumSG: 1,
				statusTypeSG: true,
				statusType: true,
				refresherEnabled: false, //开启自定义下拉刷新
				triggered: false, //设置当前下拉刷新的状态
				uploadloading: false,
			};
		},
		created() {
			this.getlist();
			this.seemoreSG(); //施工问题列表
			this.isActive = true;
		},
		onPullDownRefresh() {
			console.log('rrrr');
			this.getlist();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			this.serchval = ''
		},
		mounted()
		{
		  this.getScrollHeight();	
		},
		methods: {
			goVideo(url) {
				uni.navigateTo({
					url: "/pages/video/video?url=" + url
				})
			},
			loadingclose() {
				this.uploadloading = false
			},
			SGpro(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/onSite/mine/buildPro/buildPro?ordersId=' + item.ordersId
				})
			},
            onRefresh()
			{   this.pageNum=1;
				this.uploadloading=true;
				if(this.tabState==0)
				{
					this.getlist();
				}else{
					this.getSGlist(); //施工问题列表
				}
			
			
			setTimeout(()=> {
				this.uploadloading=false;
			}, 1000);
			},
			checkFile(fileValue,type) {
						    console.log("fileValue==" + fileValue);
						    let index = fileValue.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
						  let   fileValueSuffix = fileValue.substring(index); //截断"."之前的，得到后缀
						    if(type == 'video') {
						        if (!/(.*)\.(mp4|rmvb|avi|ts)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合视频格式
						            return false;
						        }
						    }
							
						    if(type == 'image') {
						        if (!/(.*)\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileValueSuffix)) { //根据后缀，判断是否符合图片格式
						            return false;
						        }
						    }
						 
						    return true;
						},
			getScrollHeight()
			{
				const query = uni.createSelectorQuery().in(this);
				query.select('.group').boundingClientRect()
				query.select('.boxtop').boundingClientRect()
				
				query.exec(r=>{
				      this.scrollHeight=r[0].height-r[1].height-50
					  console.log(this.scrollHeight);
				});
			},
			seemoreSG() {
				this.pageNumSG+=1;
				// 施工问题列表
				this.$http('foreman.ForemanIssues', {
					pageNum: this.pageNumSG,
					pageSize: 10
				}).then(res => {
					console.log(res, '施工问题列表')
					if (res.code == 200) {
						if (res.data != '' || res.data != null) {
							this.SGProlist.push(...res.data)
							console.log(123, this.SGProlist);
						} else {
							this.statusSG = 'contentnomore'
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			seemore() {
				this.pageNum++;
				this.$http('foreman.getlist', {
					consumerRemark: '',
					pageSize: 10,
					pageNum: this.pageNum
				}).then(res => {
					if (res.code == 200) {
						if (res.data.length == 0) {
							this.status = 'contentnomore'
						} else {
							this.orderLilst.push(...res.data)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			onInput(e) {
				if (e.detail.value == '') {
					this.getlist()
				}
			},
			serchlist() {
				if (this.serchval != '') {
					this.uploadloading = true;
					this.getlist(this.serchval)
				} else {
					uni.showToast({
						icon: "error",
						title: '请输入搜索内容'
					})
				}

			},
			goexplan(i) {
				uni.setStorage({
					data: this.orderLilst[i].projectId,
					key: 'projectId'
				})
				uni.setStorage({
					data: this.orderLilst[i].inspectionFrequencyId,
					key: 'inspectionFrequencyId'
				})
				uni.navigateTo({
					url: '/pages/foreman/projectEx/projectEx?ordersId=' + this.orderLilst[i].ordersId

				})
			},
			getlist(item) {
				if (this.isActive2) {
					this.getSGlist();
					return;
				}
				// 订单列表
				this.pageNum = 1;
				this.status = 'more';
				this.$http('foreman.getlist', {
					consumerRemark: item,
					pageSize: 10,
					pageNum: this.pageNum
				}).then(res => {
					if (res.code == 200) {
						this.uploadloading = false;
						this.orderLilst = res.data;

					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			getSGlist() {
				this.pageNumSG = 1;
				this.statusSG = 'more';
				// 施工问题列表
				this.$http('foreman.ForemanIssues', {
					pageSize: 10,
					pageNum: this.pageNumSG
				}).then(res => {
					if (res.code == 200) {
						this.SGProlist = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			// 
			onKeyInput(event) {
				this.inputValue = event.target.value
			},
			replaceInput(event) {
				var value = event.target.value;
				if (value === '11') {
					this.changeValue = '2';
				}
			},
			hideKeyboard(event) {
				if (event.target.value === '123') {
					uni.hideKeyboard();
				}
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			tablist(index) {
				if (index == 1) {
					this.isActive2 = true
				} else {
					this.isActive2 = false
				}

				if (index == 0) {
					this.tabState = 0;
					this.isActive = true
					this.getlist();
					// this.isActive=true;
				} else {
					this.tabState = 1;
					this.isActive = false
					this.getSGlist();
				}
			},
			gotoEX(index) {
				uni.navigateTo({
					url: '/pages/onSite/mine/buildPro/buildPro?inspectionNumId=' + this.SGProlist[index]
						.inspectionNumId
				})
			},
			allScreen() {
				// 全部 施工问题列表
				this.istab = 0;
				// 请求接口返回的数据给SGProlist重新赋值
				this.$http('foreman.ForemanIssues', {
					rectificationStatus: 0,
					pageSize: 10,
					pageNum: this.pageNumSG
				}).then(res => {
					if (res.code == 200) {
						this.SGProlist = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			solveScreen() {
				// 待解决  施工问题列表
				this.istab = 1;
				this.$http('foreman.ForemanIssues', {
					rectificationStatus: 1,
					pageSize: 10,
					pageNum: this.pageNumSG
				}).then(res => {
					this.SGProlist = []
					if (res.code == 200) {
						this.SGProlist = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			waitScreen() {
				// 待确认 施工问题列表
				this.istab = 2;
				this.$http('foreman.ForemanIssues', {
					rectificationStatus: 2,
					pageSize: 10,
					pageNum: this.pageNumSG
				}).then(res => {
					this.SGProlist = []
					if (res.code == 200) {
						this.SGProlist = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			sureScreen() {
				// 已确认 施工问题列表
				this.istab = 3;
				this.$http('foreman.ForemanIssues', {
					rectificationStatus: 3,
					pageSize: 10,
					pageNum: this.pageNumSG
				}).then(res => {
					this.SGProlist = []
					if (res.code == 200) {
						this.SGProlist = res.data
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toPatroService(index) {
				let event = this.SGProlist[index];
				// 待整改
				uni.navigateTo({
					url: 'pages/onSite/onSiteIndex/PatroServiceEX/PatroServiceEX?event=' + event.issueId +
						'&inspectionNumId=' + event.inspectionNumId
				})
			},
			prviewImage(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.buildProtab {
		width: 92%;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.buildProtab .active {
		background-color: #1D6AFF;
		color: #fff;
	}
.imagegrid{
		    display: grid;
		    grid-template-columns: repeat(3,1fr);
		    gap: 10px;
	}
	.videoview{
	  position: relative;
		
		
	}
	.videoview .play {
	  width: 80rpx;
	  height: 80rpx;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	}
	.media{
		width: 208rpx;
		height: 208rpx;
		position: relative;
	
			}
	.tabtext-wrapper {
		width: 23%;
		font-size: 30rpx;
		padding: 10rpx 0 21rpx;
		background-color: #ffffff;
		border-radius: 32rpx;
		height: 60rpx
	}

	.buildProlist {
		width: 92%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.buildProlist .buildProlistli {
		background-color: #fff;
		margin: 10rpx 0;
		padding: 20rpx;
		border-radius: 16rpx;
	}

	.buildIcon {
		// width: 100rpx;
		// height: 100rpx;
		display: flex;
		align-items: center;
	}

	.buildIcon image {
		width: 69rpx;
		height: 69rpx;
		border-radius: 50%;
	}

	.text_01 {
		font-weight: 500;
	}

	.buildName {
		margin-left: 20rpx;
	}

	.buildNameTop {
		color: #000;
		font-size: 28rpx;
		font-weight: 600;
		width: 450rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.buildNamebot {
		color: #333333;
		font-size: 24rpx;
		margin-top: 6rpx;
	}

	.listright {
		color: #999999;
		width: 20rpx;
		height: 20rpx;
		margin-left: 7rpx;
	}


	.text-font {
		color: #999999;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.center1 {
		display: flex;
		align-items: center;
	}

	// .listright image {
	// 	width: 100%;
	// 	height: 100%;
	// 	display: flex;
	// 	align-items: center;
	// }

	.listcontent {
		width: 100%;
		margin-top: 30rpx
	}

	.listContitle {
		font-size: 30rpx;
		justify-content: space-between;
	}

	.listContitle text:first-child {
		color: #191919;
	}

	.listConpic {
		margin-top: 20rpx;
	}

	.listConpicli {
		display: flex;
		flex-wrap: wrap;
	}

	.listConpic image {
		margin-right: 10rpx;
		width: 190rpx;
		height: 190rpx;
		border-radius: 16rpx;
	}

	.listCont {
		font-weight: 500;
		font-size: 30rpx;
		color: #191919;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.listContime {
		font-size: 24rpx;
		color: #666666;
	}

	.uni-input {
		padding-left: 20rpx;
		font-size: 24rpx;
		line-height: 50rpx;
	}

	.JJbtn {
		width: 148rpx;
		height: 56rpx;
		background-color: #1D6AFF;
		color: #fff;
		font-size: 26rpx;
		border-radius: 28rpx;
		margin-top: 36rpx;
		margin-left: 76%;
	}

	.text-center {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.group_5 {
		padding: 0 24rpx;
	}

	.group_12 {
		height: 76rpx;
	}

	.list-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}
   .list-item:first-child{
	   margin-top:0 !important;
   }
	.image_12 {
		width: 54rpx;
		height: 54rpx;
	}

	.group_7 {
		padding: 30rpx 23rpx 27rpx 24rpx;
	}

	.divider {
		margin: 0 24rpx;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 1rpx;
	}

	.group_8 {
		margin-top: 24rpx;
		padding: 0 24rpx;
	}

	.text_10 {
		font-weight: bold;
		margin-left: 24rpx;
		margin-top: 21rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_12 {
		font-weight: 500;
		margin-left: 24rpx;
		margin-top: 24rpx;
		align-self: flex-start;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_9 {
		margin-left: 24rpx;
		margin-top: 22rpx;
		align-self: flex-start;
		line-height: 28rpx;
	}

	.divider_1 {
		margin: 40rpx 24rpx 0;
		background-color: #eeeeee;
		border-radius: 0.5rpx;
		height: 2rpx;
	}

	.group_10 {
		padding: 24rpx 0 32rpx;
	}

	.text_4 {
		margin-top: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		width: 80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.text_6 {
		font-weight: 500;
		margin-bottom: 6rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_9 {
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
	}

	.text_8 {
		font-weight: 800;
		margin-left: 16rpx;
		margin-top: 10rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
		// width: 600rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;

	}

	.text_88 {
		width: 540rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.text_14 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_16 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_18 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_20 {
		color: #bfbfbf;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_22 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text-wrapper {
		padding: 14rpx 0;
		background-image: url($IMG_URL+'16557862348569282272.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 148rpx;
		height: 56rpx;
	}

	.group_11 {
		margin-right: 24rpx;
	}

	.text_24 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text-wrapper_1 {
		background-color: #1d6aff;
		border-radius: 28rpx;
		width: 148rpx;
		height: 50rpx;
		margin-left:16rpx;
	}

	.text-wrapper_2 {
		margin-left: 16rpx;
		background-color: #1d6aff;
		border-radius: 28rpx;
		width: 148rpx;
		height: 56rpx;
	}

	.text_26 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.text_28 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding-bottom: 10rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tab-bar {
		padding: 6rpx 85rpx 16rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #eeeeee;
	}

	.section_1 {
		
		// background-image: url($IMG_URL+'16557863096142053859.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// position: fixed;
		width: 100%;
		// z-index: 33;
		background: #C0DDFD;
	}

	.group_4 {
		margin-top: 58rpx;
		padding: 0 150rpx;
	}

	/* 切换下面的小图片 */
	.image_7 {
		margin-left: 193.5rpx;
		margin-top: 18rpx;
		align-self: flex-start;
		width: 41rpx;
		height: 16rpx;
	}

	.image_71 {
		margin-left: 70%;
		margin-top: -17rpx;
		align-self: flex-start;
		width: 41rpx;
		height: 16rpx;
	}


	.group_6 {
		margin-top: 32rpx;
	}

	.group_13 {
		width: 80rpx;
		height: 76rpx;
	}

	.w-f-s {
		font-weight: 500;
		font-size: 34rpx;
		letter-spacing: 1rpx;
		padding-top: 70rpx;
	}

	.group_1 {
		
		padding: 3.5rpx 0 2.5rpx;
		position: relative;
	}

	.text {
		margin-top: 38rpx;
		align-self: center;
		color: #333333;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.image_6 {
		margin-top: -42%;
		align-self: center;
		width: 93.6vw;
		height: 42.6667vw;
		z-index: 1;
		filter: drop-shadow(5px 10px 5px #D4DBE9);
		margin-left: 3%;
	}

	.image_007 {
		position: relative;
		background-image: linear-gradient(to bottom, #c0ddfd, #E2EDFB, #f6f7f9);
		z-index: 0;
		align-self: center;
		width: 100vw;
		height: 43vw;
	}

	.text_1 {
		font-weight: 600;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_2 {
		font-weight: 500;
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.search {
		padding: 20rpx 0;
		flex: 1 1 auto;
		border-radius: 36rpx;
		background-image: url($IMG_URL+'16557871149277580110.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 72rpx;
	}

	.image_8 {
		margin-left: 24rpx;
		flex-shrink: 0;
		align-self: center;
		width: 36rpx;
		height: 36rpx;
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}

	.text_43 {
		color: #1d6aff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_44 {
		color: #333333;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_45 {
		color: #333333;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.group_2 {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.image_2 {
		width: 85rpx;
		height: 18rpx;
	}

	.group_3 {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text_3 {
		margin-left: 32rpx;
		color: #999999;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image {
		width: 33rpx;
		height: 20rpx;
	}

	.image_1 {
		margin-left: 8rpx;
		width: 28rpx;
		height: 20rpx;
	}

	.image_3 {
		width: 14rpx;
		height: 24rpx;
	}

	.image_4 {
		margin: 3.5rpx 0 2.5rpx 15.5rpx;
		width: 55rpx;
		height: 18rpx;
	}

	.image_5 {
		margin-left: 8.5rpx;
		width: 53rpx;
		height: 23rpx;
	}

	.tabgroup_7 {
		padding: 30rpx 0 31rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.tabtext_7 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.tabtext_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.tablist-item {
		padding: 0 20rpx 34rpx 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.tabgroup_6 {
		margin-top: 32rpx;
		padding-left: 32rpx;
		padding-right: 30rpx;
	}

	.boxtop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;
		background-color: #f6f7f9ff;
	}
</style>
